<template>
	<view class="count poRel">
		<view class="wid100 poRel" style="height: 400rpx;background: linear-gradient(#dbffcf,#F6F6F6 60%);">
			<view class="poAbs"
				style="width: 287rpx;height: 313rpx;border-radius: 50%;border-right: 1px solid #FFFFFF;top: 0;left: 0;z-index: 1;">
			</view>
			<view class="poAbs"
				style="width: 198rpx;height: 256rpx;border-radius: 50%;border-top: 1px solid #FFFFFF;bottom: 90rpx;right: 0;z-index: 1;">
			</view>
			<view style="height: 190rpx;"></view>
			<view class="poRel wid90 mar" style="z-index: 10;">
				<view class="dis disAl disJuB">
					<view class="wid20" style="height: 123rpx;">
						<image :src="user.portrait||'/static/wd/mrtx.png'" style="width: 123rpx;"
							class="hei100 borRad50"></image>
					</view>
					<view class="wid80 ">
						<view class="dis disAl disJuB">
							<view class="dis disAl">
								<view class="fowe600 foSi30 overflowHidden" @click="ljdl"
									style="max-width: 400rpx;">{{isLogin?user.userName:'请登录'}}
								</view>
								<!-- <view v-if="isLogin" class="dis disAl disJuC borRad10 mar-left10"
									style="height: 36rpx;background-color: #443B34;padding:0px 10rpx">
									<image src="../../static/huiyuan.png"
										style="width: 24rpx;height: 25rpx;margin-right: 6rpx;"></image>
									<view class="foSi25" style="color: #FFE9D5;line-height: 25rpx;">{{user.cardName}}
									</view>
								</view> -->
							</view>
							<image src="../../static/shezhi.png" @click="go({url:'/yb_wm/my/other/bjzl'})"
								style="width: 34rpx;height: 34rpx;"></image>
						</view>
						<view v-if="isLogin" class="foSi25 fowe600 mar-top20" style="color: #333333;">{{user.userTel?user.userTel:""}}</view>
					</view>
				</view>
				<!-- <view class="bacFFF borRad20 mar-top20"
					style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);padding: 20rpx 0;">
					<view class="wid90 mar dis disAl disJuB">
						<view class="dis disAl disJuB poRel" style="width: 500rpx;">
							<view class="poAbs"
								style="width: 450rpx;height: 4rpx;background-color: #E7E7E7;top: 44rpx;left: 18rpx;">
							</view>
							<view class="poAbs" :style="'width: '+wid+'rpx;'"
								style="height: 4rpx;background-color: #E50014;top: 44rpx;left: 18rpx;"></view>
							<block v-for="(item,index) in list" :key="index">
								<view class="textCen poRel" style="z-index: 10;">
									<view class="foSi18" style="color: #969696;">{{item.condition}}</view>
									<view class="borRad50 mar-top10 mar-bott10 mar" style="width: 16rpx;height: 16rpx;"
										:style="widIndex >= index?'background-color: #E50014;':'background-color: #E7E7E7;'">
									</view>
									<view class="fowe600 foSi22"
										:style="user.cardName >= index?'color: #C01713;':''">{{item.name}}
									</view>
								</view>
							</block>
						</view>
						<view class="borRad40 dis disAl disJuC foSi18 coFFF"
							@click="go({t:1,url:'/yb_wm/order/vip/wkk'})"
							style="width: 90rpx;height: 38rpx;background-color: #E20A21;">升级</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="wid90 mar bacFFF borRad20 poRel"
			style="margin-top: -50rpx;box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);z-index: 10;">
			<view class="wid90 mar">
				<view class="dis disAl disJuB hei87" style="border-bottom: 1rpx solid #C2C2C2;">
					<view class="fowe800 foSi32">我的订单</view>
					<view class="dis disAl" @click="go({t:1,url:'/yb_wm/order/order?bs=1'})">
						<view class="fowe600 foSi22 mar-right10" style="color: #666666;">查看最近订单</view>
						<uni-icons type="right" size="22rpx" color="#666666"></uni-icons>
					</view>
				</view>
				<view class="fowe800 foSi32 mar-top30 poRel" style="line-height: 32rpx;">
					<view class="poRel" style="z-index: 10;">我的钱包</view>
					<view class="poAbs" style="bottom: 0;width: 91rpx;height: 12rpx;background: #FCD8D8;z-index: 1;">
					</view>
				</view>
				<view class="dis mar-top40" style="justify-content: space-around;">
					<view class="wid25 textCen">
						<view class="foSi32 fowe600" :style='{color:tColor}' style="line-height: 41rpx;">0</view>
						<view class="foSi28 mar-top20" style="color: #666666;">奖金</view>
					</view>
					<view class="wid25 textCen" @click="go({url: '/yb_wm/my/integral/my-integral'})">
						<view class="foSi32 fowe600" :style='{color:tColor}' style="line-height: 41rpx;">{{user.integral || 0}}</view>
						<view class="foSi28 mar-top20" style="color: #666666;">积分</view>
					</view>
					<view class="wid25 textCen" @click="go({url:'/yb_wm/other/recharge/yesy'})">
						<view class="foSi32 fowe600" :style='{color:tColor}' style="line-height: 41rpx;">{{user.balance || 0}}</view>
						<view class="foSi28 mar-top20" style="color: #666666;">余额</view>
					</view>
					<!-- <view class="wid25 textCen" @click="go({url:'/yb_wm/my/share/share'})">
						<view class="mar" style="width: 41rpx;height: 41rpx;">
							<image src="../../static/fenxiangma.png" class="wh100"></image>
						</view>
						<view class="foSi28 mar-top20" style="color: #666666;">分享码</view>
					</view> -->
				</view>
				<view style="height: 40rpx;"></view>
			</view>
		</view>
		<!-- <view class="wid90 mar bacFFF borRad20 mar-top30" style="height: 90rpx;">
			<view class="wid90 mar hei100 dis disAl disJuB">
				<view class="dis disAl">
					<image :src="urlImage+'/wechatimg/tu1.png'" style="width: 60rpx;height: 67rpx;"></image>
					<view class="mar-left10 fowe800 foSi25">公众号福利群</view>
				</view>
				<view class="dis disAl disJuC borRad40 coFFF foSi22" @click="qunPopup()"
					style="width: 140rpx;height: 44rpx;background-color: #E20A21;">
					<view style="margin-right: 6rpx;">立即加入</view>
					<uni-icons type="right" size="22rpx" color="#ffffff"></uni-icons>
				</view>
			</view>
		</view> -->
		<view class="wid90 mar mar-top20" style="height: 200rpx;">
			<image src="https://xzj.7yu.cc/web/static/yb_wm/1/2024/07/15/202407151452099362.png" class="wh100 borRad20">
			</image>
		</view>
		<view class="wid90 mar borRad20 bacFFF mar-top20"
			style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
			<view class="hei20"></view>
			<view class="wid90 mar">
				<view class="fowe800 foSi32 poRel" style="line-height: 32rpx;">
					<view class="poRel" style="z-index: 10;">{{layout.list[0].styles.title}}</view>
					<view class="poAbs" style="bottom: 0;width: 91rpx;height: 12rpx;background: #FCD8D8;z-index: 1;">
					</view>
				</view>
				<view class="dis" style="flex-wrap: wrap;">
					<view v-for="(item,index) in layout.list[0].styles.btnList" class="textCen mar-top40" :class="
					layout.list[0].styles.num == 3?'wid33;':layout.list[0].styles.num == 4?'wid25;':'wid20;'
					" @click="gopage(item)">
						<view class="hei60">
							<view class="mar" style="width: 42rpx;height: 41rpx;">
								<image :src="item.img" class="wh100"></image>
							</view>
						</view>
						<view class="foSi25 mar-top10" style="color: #666666;">{{item.word}}</view>
					</view>
					<!-- <view class="textCen wid20" @click="go({url:'/yb_wm/my/redeem/redeem'})">
						<view class="hei60">
							<view class="mar" style="width: 42rpx;height: 41rpx;">
								<image src="../../static/duihuanzhongxin.png" class="wh100"></image>
							</view>
						</view>
						<view class="foSi25 mar-top10" style="color: #666666;">兑换中心</view>
					</view> -->
					<!-- <view class="textCen wid20">
						<view class="hei60">
							<view class="mar" style="width: 41rpx;height: 41rpx;">
								<image src="../../static/jiameng.png" class="wh100"></image>
							</view>
						</view>
						<view class="foSi25 mar-top10" style="color: #666666;">招商加盟</view>
					</view>
					<view class="textCen wid20" @click="go({url:'/yb_wm/my/coupon/coupon-dl'})">
						<view class="hei60">
							<view class="mar" style="width: 43rpx;height: 43rpx;">
								<image src="../../static/yuihuijuan.png" class="wh100"></image>
							</view>
						</view>
						<view class="foSi25 mar-top10" style="color: #666666;">优惠券</view>
					</view>
					<view class="textCen wid20" @click="gongPopup()">
						<view class="hei60">
							<view class="mar" style="width: 44rpx;height: 44rpx;">
								<image src="../../static/guanzhugongzhonghao.png" class="wh100"></image>
							</view>
						</view>
						<view class="foSi25 mar-top10" style="color: #666666;">关注公众号</view>
					</view> -->
				</view>
				<view style="height: 40rpx;"></view>
			</view>
		</view>
		<view style="height: 180rpx;"></view>
		<tab-bar></tab-bar>
		<mg-popup v-model="showq" position="middle" :z-index="5000">
			<view class="mar bacFFF borRad30" style="width: 628rpx;">
				<image :src="urlImage+'/wechatimg/fuliqun.png'" style="height: 320rpx;" class="wid100"></image>
				<view class="textCen mar-top15">
					<view class="fowe600 f36">快来加入微信福利群</view>
					<view class="mar-top20 foSi25" style="color: #A3A3A3;">超多优惠福利早知道！</view>
				</view>
				<view class="mar" style="width: 176rpx;height: 176rpx;margin-top: 50rpx;">
					<image src="../../static/hym.png" class="wh100"></image>
				</view>
				<view style="height: 50rpx;"></view>
			</view>
			<view class="mar mar-top30 dis disAl disJuC">
				<image src="../../static/guanbi1.png" @click="guanbi()"
					style="width: 38rpx;height: 38rpx;"></image>
			</view>
		</mg-popup>
		<mg-popup v-model="showgzh" position="middle" :z-index="5000">
			<view class="mar bacFFF borRad30" style="width: 628rpx;">
				<image :src="urlImage+'/wechatimg/gongzonghao.png'" style="height: 320rpx;" class="wid100"></image>
				<view class="textCen mar-top15">
					<view class="fowe600 f36">关注XXXX微信公众号</view>
					<view class="mar-top20 foSi25" style="color: #A3A3A3;">超多优惠福利早知道！</view>
				</view>
				<view class="mar" style="width: 176rpx;height: 176rpx;margin-top: 50rpx;">
					<image src="../../static/hym.png" class="wh100"></image>
				</view>
				<view style="height: 50rpx;"></view>
			</view>
			<view class="mar mar-top30 dis disAl disJuC">
				<image src="../../static/guanbi1.png" @click="guanbi()"
					style="width: 38rpx;height: 38rpx;"></image>
			</view>
		</mg-popup>
		
		<mg-popup v-model="show_bindinfo" position="middle" :z-index="5000">
			<view v-if="show_bindinfo" class="mar bacFFF borRad30" style="width: 628rpx; padding-top: 15px;">
				<view class="dis" style="padding-left: 40rpx; height: 100rpx; line-height: 100rpx;">
					<view class="" style="width:150rpx; line-height: 100rpx;">
						店铺logo：
					</view>
					<view class="" style="justify-content: center; text-align: center;">
						<button hover-class="none" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
							<image :src="user.portrait||'/static/wd/mrtx.png'" style="width: 80rpx; height: 80rpx;"
								class="borRad50"></image>
						</button>
					</view>
				</view>
				<view class="dis" style="padding-left: 40rpx; border-top: 1px solid #00000060; height: 100rpx; line-height: 100rpx;">
					<view class="" style="width:150rpx; line-height: 100rpx;">
						店铺名称：
					</view>
					<view class="">
						<input v-if="show_bindinfo"  type="nickname" @change="namChange" :value="isLogin?user.userName:'请登录'" style=" line-height: 100rpx; height: 100%;"/>
					</view>
				</view>
				<view class="dis" style="padding-left: 40rpx; border-top: 1px solid #00000060; height: 100rpx; line-height: 100rpx;">
					<view class="" style="width:150rpx; line-height: 100rpx;">
						手机号：
					</view>
					<view class="">
						<input v-if="show_bindinfo"  type="number" :value="user.userTel?user.userTel:''" maxlength="11" style="width: 200rpx; line-height: 100rpx; height: 100%;"/>
					</view>
					<button class="dis hei50" @getphonenumber="getWechatMobile" open-type="getPhoneNumber" style="padding-left: 20rpx; height: 100rpx; line-height: 100rpx; background: #fff; font-size: 25rpx;">获取手机号</button>
				</view>
				<button class="dis hei50" style=" border-top: 1px solid #00000060; height: 100rpx; justify-content: center; line-height: 100rpx; background: #fff; font-size: 25rpx;" @click="queding">确定</button>
			</view>
			<view class="mar mar-top30 dis disAl disJuC">
				<image src="../../static/guanbi1.png" @click="guanbi()"
					style="width: 38rpx;height: 38rpx;"></image>
			</view>
		</mg-popup>
		
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import load from '@/components/common/load.vue'
	import mgPopup from '@/components/common/popup.vue'
	import { uploadImg } from '@/common/wechat-util.js';
	import siteInfo from '@/common/siteinfo'
	import mgModal from '@/components/common/modal.vue'
	
	export default {
		name: 'mine',
		components: {
			load,
			mgPopup,
		},
		data() {
			return {
				showq: false,
				showgzh: false,
				wid: 0,
				widIndex: 0,
				list: [],
				show_bindinfo:false,
				bindinfo:{
					userName:'', // 昵称
					portrait:'', // 头像
					userTel:'', // 手机号码
				}
			};
		},
		onLoad(options) {
			console.log(this.urlImage)
			console.log('用户信息')
			console.log(this.user)
			
			this.getSystem();
			this.getLoginInfo({
				inviteId: options.userId
			});
			this.getLayout({
				page: 'personalcenter',
				id: '2'
			}).then(() => {
				this.showloading = false
				// #ifdef H5
				this.util.setNT(this.layout.pageSetting[0].styles.navTitle || '个人中心')
				// #endif
			});
			this.getConfig({
				key: 'vipset',
				api: 'config',
				params: {
					ident: 'vipSet'
				}
			})
			this.getLayout()
			this.getLoginInfo().then(() => {
				this.bindinfo.userName = this.user.userName
				this.bindinfo.portrait = this.user.portrait
				this.bindinfo.userTel = this.user.userTel
			})
			if(!this.user.userTel || this.user.userTel == 'null'){
				this.show_bindinfo = true
			}
		},
		onShow() {
			if (this.uId) {
				this.refreshUser({
					nomask: 1,
					get: 1,
					now: 1,
				})
			}
			this.getList()
		},
		computed: {
			...mapState({
				layout: state => state.layout.personalcenter.body || {},
			})
		},
		methods: {
			gopage(v){
				console.log(v);
				// this.goUrl(v.url, v)
				if (v.url.name.id == "wd_gzgzh") {
					this.showgzh = true
				} else {
					this.goUrl(v.url, v)
				}
			},
			queding(){
				var that = this;
				if(that.bindinfo.userName == ''){
					uni.showToast({
						title: "请输入姓名",
						icon:'error',
						duration: 2000
					})
					return;
				}
				
				if(that.bindinfo.portrait == ''){
					uni.showToast({
						title: "请上传头像",
						icon:'error',
						duration: 2000
					})
					return;
				}
				
				if(that.bindinfo.userTel == ''){
					uni.showToast({
						title: "请获取手机号",
						icon:'error',
						duration: 2000
					})
					return;
				}
				
				let res = this.util.request({
					'url': this.api.xgyh,
					method: 'POST',
					mask: 1,
					data: this.bindinfo,
				})
				if (!res) {
					this.loading = false
				} else {
					this.util.message('提交成功', 1, 1000)
					
					this.show_bindinfo = false
					
				}
			},
			getWechatMobile(result) {
				
				if (result.detail.errMsg == 'getPhoneNumber:ok') {
					let sessionKey = getApp().globalData.session_key,
						data = result.detail.encryptedData,
						iv = result.detail.iv,
						userId = this.uId
					this.util.request({
						url: this.api.jm,
						method: 'POST',
						data: {
							userId,
							sessionKey,
							data,
							iv
						}
					}).then(res => {
						this.loading = false
						if (res.data) {
							this.user.userTel = res.data
							this.bindinfo.userTel = res.data
						}
						console.log(res)
					}).catch(() => {
						this.loading = false
					})
				} else {
					this.loading = false
					uni.showModal({
						title: '温馨提示',
						content: '授权手机号失败',
						showCancel: false
					});
					return;
				}
			},
			namChange(res){
				this.user.userName = res.detail.value
				this.bindinfo.userName = res.detail.value
			},
			//选择头像
			onChooseavatar(e) {
				var that = this
				console.log(e.detail);
				that.shangchuan(e.detail.avatarUrl)
			},
			shangchuan(tempFilePaths){
				console.log(tempFilePaths);
				console.log(this.api.sctp);
				var that = this
				
					uni.uploadFile({
						url: that.util.url(that.api.sctp),
						filePath: tempFilePaths,
						fileType: 'image',
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							"appType": that.api.platform,
							'uniacid': siteInfo.uniacid,
							'module': 'yb_wm',
						},
						success: (res) => {
							that.user.portrait = res.data;
							that.bindinfo.portrait = res.data
						},
						fail: (err) => {
							console.log('uploadImage fail', err);
						},
					});
			},
			async ljdl() {
				if(!this.isLogin) {
					if (!await this.checkLogin()) return
				}
			},
			guanbi(){
				this.showq = false
				this.showgzh = false
				this.show_bindinfo = false
			},
			qunPopup(){
				this.showq = true
			},
			gongPopup(){
				this.showgzh = true
			},
			...mapActions(['getConfig']),
			onClick() {
				this.$emit('click');
			},
			async getList() {
				let {
					data
				} = await this.util.request({
					'url': this.api.hydj,
					data: {
						userId: uni.getStorageSync('userId')
					}
				})
				this.list = data
				if(this.uId){
					for (var i = 0; i < this.list.length; i++) {
						if (this.user.cardName == this.list[i].name) {
							this.wid = this.list[i].condition < 1000 ? 0 : this.list[i].condition < 20000 ? 100 : this
								.list[i].condition < 150000 ? 200 : this.list[i].condition < 300000 ? 326 : 450
							console.log(this.wid)
							this.widIndex = i
						}
					}
				}else{
					this.wid = 0
					this.widIndex = 0
				}
				console.log(data)
			},
		},
		onPageScroll(e) {
			if (this.opcity >= 1 && e.scrollTop / 64 >= 1) {
				return;
			}
			let o = e.scrollTop / 64
			this.opcity = o;
		},
	};
</script>
<style scoped lang="scss">
	.count {
		min-height: 100vh;
		background-color: #F6F6F6;
	}
</style>